<template>
  <div v-if="questions.length > 0" class="question-section">
    <h3>{{ title }}</h3>
    <div 
      v-for="(question, index) in questions" 
      :key="`${type}-${index}`" 
      class="question-item"
    >
      <div class="question-number">{{ index + 1 }}.</div>
      <div class="question-content">
        <p class="question-text">{{ question.question }}</p>

        <!-- 选择题选项 -->
        <div class="options" v-if="question.options && type === '选择题'">
          <div v-for="(option, optIndex) in question.options" :key="optIndex" class="option">
            {{ String.fromCharCode(65 + optIndex) }}. {{ option }}
          </div>
        </div>

        <div class="answer-section">
          <span class="answer">答案：{{ question.answer }}</span>
          <span class="explanation">解析：{{ question.explanation }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QuestionSection',
  props: {
    questions: {
      type: Array,
      default: () => []
    },
    type: {
      type: String,
      required: true
    },
    title: {
      type: String,
      required: true
    }
  }
}
</script>

<style scoped>
.question-section {
  margin-bottom: 2rem;
}

.question-section h3 {
  color: #2d3748;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e2e8f0;
}

.question-item {
  display: flex;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.question-number {
  flex: 0 0 40px;
  font-weight: 600;
  color: #667eea;
  font-size: 1.1rem;
}

.question-content {
  flex: 1;
}

.question-text {
  margin-bottom: 1rem;
  line-height: 1.6;
  color: #2d3748;
}

.options {
  margin-bottom: 1rem;
}

.option {
  padding: 0.5rem 0;
  color: #4a5568;
}

.answer-section {
  padding-top: 0.75rem;
  border-top: 1px solid #e2e8f0;
  margin-top: 0.75rem;
}

.answer {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: #38a169;
}

.explanation {
  display: block;
  color: #4a5568;
  font-style: italic;
}
</style>